<template>
  <div>
    <div class="header">
      <el-button size="small" type="primary" @click="dialogType=1;editData={};dialogVisible=true">添加</el-button>
    </div>

    <div class="content">
      <el-table
        :data="classifyData"
        :header-cell-style="{'color':'#000'}"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="100"
          align="center"
        />
        <el-table-column
          prop="name"
          label="分类名称"
          width="300"
          align="center"
        />
        <el-table-column
          label="状态"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="changeStatus(scope.row)" />
          </template>
        </el-table-column>

        <el-table-column
          label="更新时间"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span style="margin-left: 10px">{{ scope.row.updated_at }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div class="btn">
              <span @click="handleEdit(scope.row)">编辑</span>
              <span @click="handleDelete(scope.$index,scope.row)">删除</span>
            </div>
          </template>
        </el-table-column>
        <div slot="empty">
          暂无数据
        </div>
      </el-table>
    </div>

    <classifyDialog v-model="dialogVisible" :dialog-type="dialogType" :edit-data="editData" @success="success" />
  </div>
</template>

<script>
import classifyDialog from './components/classifyDialog.vue'
export default {
  components: { classifyDialog },
  data() {
    return {
      dialogVisible: false,
      dialogType: 1,
      editData: {},

      classifyData: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 添加或编辑成功
    success() {
      this.getList()
    },
    // 获取表格数据
    getList() {
      this.$request.get('/admin/goods_category').then(res => {
        this.classifyData = res.data.data
      }).catch()
    },

    // 修改状态
    changeStatus(e) {
      this.$request.post(`/admin/goods_category/status/${e.id}`, { status: e.status })
    },

    // 操作
    handleEdit(row) {
      this.dialogType = 2
      this.editData = row
      this.dialogVisible = true
    },
    handleDelete(idx, row) {
      this.$confirm('此操作将删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$request.post(`/admin/goods_category/delete/${row.id}`).then(_ => {
          this.classifyData.splice(idx, 1)
          this.$message({ message: '删除成功', type: 'success' })
        }).catch()
      }).catch()
    }
  }
}
</script>

<style lang="scss" scoped>
    .header{
        width: 100%;
        height: auto;
        padding: 10px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
    }

    .content{
        width: 100%;
        margin-top: 10px;
    }

    .btn{
    &>span{
      display: inline-block;
      color: #1989fa;
      width: 40px;
      text-align: center;
      cursor: pointer;
    }
  }
</style>
